<template>
    <div>
        <!--标签-->
        <div class="first_content">
            <!--筛选条件-->
            <div class="shaixuan">

                <el-form  :inline="true" ref="form" :model="form" v-model="searchinput" label-width="80px"
                    style="margin-left: -10px;">
                    <!--<el-date-picker size="mini" v-model="datee" type="datetime" placeholder="选择日期时间" >-->
                    <!--</el-date-picker>-->

                    <!--<el-form-item label="添加时间" prop="datee">-->
                        <el-date-picker
                                v-model="datee"
                                type="daterange"
                                align="right"
                                size="mini"
                                unlink-panels
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                format="yyyy-MM-dd"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                :default-time="['00:00:00', '23:59:59']"
                                :picker-options="pickerOptions">
                        </el-date-picker>
                    <!--</el-form-item>-->

                    <el-select size="mini" style="margin-left:20px;" v-model="user" clearable
                               placeholder="请输入客户昵称关键字"
                               filterable
                               remote
                               reserve-keyword
                               :remote-method="remoteMethod"
                               :loading="userLoading"
                    >
                        <el-option v-if="item.unionid" v-for="item in TypeData"  :label="item.name"
                            :value="item.unionid">
                        </el-option>
                    </el-select>

                    <el-select size="mini" style="margin-left:20px;" v-model="type" placeholder="选择事件" clearable>
                        <el-option label="创建订单" value="创建订单"></el-option>
                        <el-option label="已付款" value="已付款"></el-option>
                        <el-option label="已退款" value="已退款"></el-option>
                        <el-option label="已领课" value="已领课"></el-option>
                        <el-option label="邀约" value="邀约"></el-option>
                        <el-option label="到课" value="到课"></el-option>
                        <el-option label="加微信" value="加微信"></el-option>
                    </el-select>

                    <el-form-item class='caozuo' size="mini">
                        <el-button type="primary" @click="search()" size="mini">搜索</el-button>
                        <el-button @click="resetForm()" size="mini">重置</el-button>
						<el-button type="primary" @click="sync_data()" size="mini">同步数据</el-button>
                    </el-form-item>

                </el-form>
                
            </div>

            <div style="margin-left:40px;font-size:14px;color:#666">默认结果为当天数据</div>
            
            <div class="timeline" >
                <el-timeline v-loading="loading">
                    <div v-if="lifedata.length === 0">
                      <el-card class="box-card" style="display: inline-block;width: 90%;height: 200px;line-height: 200px;text-align: center;color: #ccc;">
                          暂无数据
                      </el-card>
                    </div>
                    <el-timeline-item v-else  :timestamp="index" placement="top"  v-for="(item,index) in lifedata">
                        <!-- <span>{{index}}</span> -->
                        <el-card>
                            <el-tabs :tab-position="top" style="height: 250px;">
                                <el-tab-pane :label="index1" v-for="(item1,index1) in item">
                                    <el-table :data="item1" style="width: 100%" v-if="index1 == '创建订单' " height="250"
                                        border>
                                        <el-table-column prop="goods_name" label="商品" ></el-table-column>
                                        <el-table-column prop="order_no" label="单号" ></el-table-column>
                                        <el-table-column prop="price" label="价格" ></el-table-column>
                                        <el-table-column prop="phone" label="手机" ></el-table-column>
                                        <el-table-column prop="source" label="来源" ></el-table-column>
                                    </el-table>

                                    <el-table :data="item1" style="width: 100%" v-if="index1 == '邀约' " height="250"
                                        border>
                                        <el-table-column prop="changci" label="场次" ></el-table-column>
                                        <el-table-column prop="changci_name" label="场次直播名称"
                                           ></el-table-column>
                                        <el-table-column prop="yaoyueren" label="邀约人" ></el-table-column>
                                        <el-table-column prop="source" label="来源" ></el-table-column>
                                    </el-table>

                                    <el-table :data="item1" style="width: 100%" v-if="index1 == '已付款' " height="250"
                                        border>
                                        <el-table-column prop="goods_name" label="商品" ></el-table-column>
                                        <el-table-column prop="order_no" label="单号" ></el-table-column>
                                        <el-table-column prop="fukuan" label="付款" ></el-table-column>
                                        <el-table-column prop="phone" label="手机" ></el-table-column>
                                        <el-table-column prop="yufenpei" label="预分配" ></el-table-column>
                                        <el-table-column prop="source" label="来源" ></el-table-column>
                                    </el-table>

                                    <el-table :data="item1" style="width: 100%" v-if="index1 == '已退款' " height="250"
                                        border>
                                        <el-table-column prop="goods_name" label="商品" ></el-table-column>
                                        <el-table-column prop="order_no" label="退款单号" ></el-table-column>
                                        <el-table-column prop="tuikuan" label="退款" ></el-table-column>
                                        <el-table-column prop="phone" label="手机" ></el-table-column>
                                        <el-table-column prop="source" label="来源" ></el-table-column>
                                    </el-table>


                                    <el-table :data="item1" style="width: 100%" v-if="index1 == '已领课' " height="250"
                                        border>
                                        <el-table-column prop="goods_name" label="商品" ></el-table-column>
                                        <el-table-column prop="order_no" label="单号" ></el-table-column>
                                        <el-table-column prop="phone" label="手机" ></el-table-column>
                                        <el-table-column prop="source" label="来源" ></el-table-column>
                                    </el-table>

                                    <el-table :data="item1" style="width: 100%" v-if="index1 == '到课' " height="250"
                                        border>
                                        <el-table-column prop="changci" label="场次"></el-table-column>
                                        <el-table-column prop="changci_name" label="场次直播名称"
                                            ></el-table-column>
                                        <el-table-column prop="source" label="来源" ></el-table-column>
                                    </el-table>

                                    <el-table :data="item1" style="width: 100%" v-if="index1 == '加微信' " height="250"
                                        border>
                                        <el-table-column prop="jiaweizhujiao" label="加微助教"
                                            ></el-table-column>
                                        <el-table-column prop="source" label="来源" ></el-table-column>
                                    </el-table>

                                </el-tab-pane>
                            </el-tabs>
                        </el-card>
                    </el-timeline-item>
                </el-timeline>
            </div>


        </div>
    </div>
</template>

<script>
    import Panle from '@/components/Panle';
    import PersButton from '@/components/PersButton';
    import {
        getUserList,
        getLifecycleList,
        getclient,
		getUserInfo,
    } from "@/api/scrm/life/lifecycle";
    import SelectImg from '@/components/select-img';
    import {
        hasPermission,
        isShow
    } from '@/common/permission'
    import { dateFormat } from "@/utils";
    export default {
        components: {
            Panle,
            PersButton,
            SelectImg
        },
        data() {
            return {
                // datee: '',
                create_time: [dateFormat(new Date(), 'yyyy-MM-dd') + ' 00:00:00', dateFormat(new Date(), 'yyyy-MM-dd') + ' 23:59:59'],
                datee: [dateFormat(new Date(), 'yyyy-MM-dd') + ' 00:00:00', dateFormat(new Date(), 'yyyy-MM-dd') + ' 23:59:59'],
                type: '',
                user: '',
                userLoading: false,
                TypeData: [],
                searchinput: '',
                IsShowPicDig: false,
                clickType: false,
                imgnum: 1, //选择图片数量
                lifedata: [],
            }
        },
        created() {
            this.init();
        },
        methods: {
            search() {
                console.log('日期:', this.datee)
                console.log('用户:', this.user)
                console.log('事件:', this.type)
                this.init();
            },
            resetForm() {
                this.type = '';
                this.datee = '';
                this.user = '';
                this.init();
            },
			sync_data(){
				 this.loading = true;
				//获取用户列表
				let _param1 = {
				    "user": this.user,
                    "datee": this.datee,
				}
				getclient(_param1).then((res) => {
				    console.log(res);
					if(res.data.count != 0){
						
						for (var i = 0; i <res.data.data.length; i++) {
							console.log(res.data.data[i].zhujiao_id)
							
							getUserInfo({
								externalUserid:res.data.data[i].external_userid,
								userid: res.data.data[i].zhujiao_id,
							}).then((res) => {
							    console.log(res);
							})
						}
						 this.loading = false;
					}
				})
			},
            init: function() {
                this.loading = true;
                
                let _param = {
                    "user": this.user,
                    "datee": this.datee,
                    "type": this.type,
                    "flag": '89899',
                    "create_time": this.create_time
                }
                getLifecycleList(_param).then((res) => {
                    console.log('5555555555',res.data.count);
					this.lifedata = res.data.data
					this.datee =  res.data.datee
                    
                    this.loading = false;
                })
                 

                getUserList(_param).then((res) => {
                    console.log(res);
                    this.TypeData = res.data
                    // this.lifedata = res.data
                })
                this.datee = new Date()
            },
            remoteMethod(query) {
                if (query != '') {
                    this.userLoading = true
                    getUserList({
                        key: query
                    }).then(res => {
                        this.userLoading = false
                        this.TypeData = res.data
                    })
                } else {
                    this.TypeData = [];
                }
            },

        }
    }
</script>

<style lang="scss" scoped>
    @import "@/assets/css/common.scss";

    .input-with-select .el-input-group__prepend {
        background-color: #fff;
    }

    .shaixuan {
        display: flex;
        flex-flow: nowrap;
        align-content: center;
        margin-top: 15px;
        margin-left:50px;
    }

    .first_content {
        display: flex;
        flex-flow: nowrap;
        flex-direction: column;
        align-content: center;
    }

    .timeline {
        margin-top: 30px;
    }
    .caozuo{
        margin-left:20px;
    }
    
</style>